<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <!-- 标签页 -->
    <van-tabs type="card" @click="onClick">
      <van-tab title="热门推荐">
        <van-card
          v-for="(item, index) in hotGoods"
          :key="index"
          :price="item.price"
          :title="item.goodsname"
          :thumb="'http://localhost:3000' + item.img"
        >
          <template #footer>
            <van-button size="mini" @click="addCart(item.id)">按钮</van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
          v-for="(item, index) in newGoods"
          :key="index"
          :price="item.price"
          :title="item.goodsname"
          :thumb="'http://localhost:3000' + item.img"
        >
          <template #footer>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          v-for="(item, index) in allGoods"
          :key="index"
          :price="item.price"
          :title="item.goodsname"
          :thumb="'http://localhost:3000' + item.img"
        >
        <template #footer>
          <van-button size="mini">按钮</van-button>
        </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      hotGoods: [],
      newGoods: [],
      allGoods: [],
    };
  },
  created() {
    // 获取首页分类信息
    this.getcate();
    // 首頁商品信息
    this.getindexgoods();
  },
  methods: {
    // 加入购物车
    addCart(id) {
      console.log(id);
      this.$http.post('/cartadd', {
        uid: this.$store.state.mUserInfo.uid,
        goodsid: id,
        num: 1
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        })
    },
    onClick(name, title) {
      console.log(name);
      console.log(title);
    },
    // 获取商品分类
    getcate() {
      this.$http
        .get("/getcate")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取首页商品信息
    getindexgoods() {
      // gethortgoods 新版后台接口
      this.$http
        .get("/gethortgoods")
        .then((res) => {
          this.hotGoods = res.list[0].content;
          this.newGoods = res.list[1].content;
          this.allGoods = res.list[2].content;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
